
<script type="text/javascript">

    $.validator.setDefaults({
        submitHandler: function() {
            $.post("<?= site_url() ?>setup/insert_courier", {
                couriername: $('#couriername').val(),
                other_courier: $('#other_courier').val(),
                areaname: $('#areaname').val(),
                services: $('#services').val(),
                status: $('#status').val(),
                price1kg: $('#price1kg').val(),
                price15kg: $('#price15kg').val(),
                price5kg: $('#price5kg').val()
            },
            function(data) {
                window.location = '<?php echo base_url(); ?>setup/courier';
            });
        }
    });
    $(document).ready(function() {

        $("#formarea").keypress(function(e) {
            if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
                $.validator.setDefaults({
                    submitHandler: function() {
                        $.post("<?= site_url() ?>setup/insert_courier", {
                            couriername: $('#couriername').val(),
                            other_courier: $('#other_courier').val(),
                            areaname: $('#areaname').val(),
                            services: $('#services').val(),
                            status: $('#status').val(),
                            price1kg: $('#price1kg').val(),
                            price15kg: $('#price15kg').val(),
                            price5kg: $('#price5kg').val()
                        },
                        function(data) {
                            window.location = '<?php echo base_url(); ?>setup/courier';
                        });
                    }
                });
            }
        });

        $("#formarea").validate();

        $('#couriername').select2({
            placeholder: "Select Courier",
            allowClear: true
        });
        $('#areaname').select2({
            placeholder: "Select Area",
            allowClear: true
        });

        $('#othercourier').hide();
    });


    function change_courier(courier) {
        if (courier == 'other') {
            $('#othercourier').show();
        } else {
            $('#othercourier').hide();
        }
    }

    function change_area(area) {
        $.post("<?= site_url() ?>setup/check_area", {
            area: area
        },
        function(data) {
            $('#services').val(data);
        });
    }

    function cancel() {
        window.location = '<?php echo base_url(); ?>setup/courier';
    }

</script>

<form class="form-horizontal" id="formarea" role="form" method="post" action="#">
    <div class="col-md-offset-1">
        <div class="col-md-11">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title"><b class="caret"></b><b> Form - Add Courier</b></h4>
                </div>
                <div class="panel-body">	

                    <div class="col-sm-8">
                        <div class="col-sm-4"><label for="couriername" class="control-label">Courier Name<span style="color:red;">*</span></label></div>
                        <div class="col-sm-8">
                            <select name="couriername" id="couriername" class="form-control input-sm required" onchange="change_courier(this.value);" style="width:350px;">
                                <option value="">-- select --</option>
                                <?php
                                if (isset($courier_list) && !empty($courier_list)):
                                    foreach ($courier_list as $row):
                                        echo '<option value="' . $row['COURIER_ID'] . '">' . $row['COURIER_NAME'] . '</option>';
                                    endforeach;
                                endif;
                                ?>
                                <option value="other">Other ..</option>
                            </select>
                            <span id="othercourier">
                                <input type="text" class="form-control input-sm required" id="other_courier" name="other_courier" maxlength="50">
                            </span>
                        </div>
                    </div>
                    <div class="col-sm-8">
                        <div class="col-sm-4"><label for="areaname" class="control-label">Delivery Area<span style="color:red;">*</span></label></div>
                        <div class="col-sm-7">
                            <select name="areaname" id="areaname" class="form-control input-sm required" onchange="change_area(this.value);" style="width:350px;">
                                <option value="">-- select --</option>
                                <?php
                                if (isset($area_list) && !empty($area_list)):
                                    foreach ($area_list as $row):
                                        echo '<option value="' . $row['AREA_ID'] . '">' . $row['AREA_NAME'] . ' - ' . $row['REGIONAL_NAME'] . '</option>';
                                    endforeach;
                                endif;
                                ?>
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-8">
                        <div class="col-sm-4"><label for="services" class="control-label">Courier Service</label></div>
                        <div class="col-sm-5">
                            <input type="text" class="form-control input-sm required" id="services" name="services" maxlength="50" style="width: 140px;" value="Select Area First" readonly/>
                        </div>
                    </div>
                    <div class="col-sm-8">
                        <div class="col-sm-4"><label for="status" class="control-label">Price Status<span style="color:red;">*</span></label></div>
                        <div class="col-sm-5">
                            <select name="status" id="status" class="form-control input-sm required" style="width: 140px;">
                                <option value="">-- select --</option>
                                <option value="Y">Active</option>
                                <option value="N">Non Active</option>
                            </select>
                        </div>
                    </div>		

                    <div class="col-sm-8">
                        <div class="col-sm-4"><label for="price1kg" class="control-label">Rate < 1Kg<span style="color:red;">*</span></label></div>
                        <div class="col-sm-8"><input type="text" class="form-control input-sm required number" id="price1kg" name="price1kg" maxlength="7" style="width: 120px;"></div>
                    </div>
                    <div class="col-sm-8">
                        <div class="col-sm-4"><label for="price15kg" class="control-label">Rate 1 - 5Kg<span style="color:red;">*</span></label></div>
                        <div class="col-sm-8"><input type="text" class="form-control input-sm required number" id="price15kg" name="price15kg" maxlength="7" style="width: 120px;"></div>
                    </div>
                    <div class="col-sm-8">
                        <div class="col-sm-4"><label for="price5kg" class="control-label">Rate > 5Kg<span style="color:red;">*</span></label></div>
                        <div class="col-sm-8"><input type="text" class="form-control input-sm required number" id="price5kg" name="price5kg" maxlength="7" style="width: 120px;"></div>
                    </div>

                    <div class="col-sm-8" style="padding-bottom: 0px;">
                        <div class="col-sm-4">
                            &nbsp;
                        </div>
                    </div>
                    <div class="col-sm-8">
                        <div class="col-sm-4"><label for="button" class="control-label">&nbsp;</label></div>
                        <div class="col-sm-4">
                            <button type="submit" class="btn btn-success btn-block">Save Add</button>
                        </div>
                        <div class="col-sm-4">
                            <button type="button" class="btn btn-default btn-block" onclick="cancel();" >Cancel</button>
                        </div>
                    </div>		
                </div>
            </div>
        </div>
    </div>
</form>	

<div style="margin-top:20px;"></div>

